import React from "react";
import 钢铁材料 from "./钢铁材料.jpg";
import 耐火材料 from "./耐火材料.jpg";
import { Card, Icon } from "antd";
import { allStore } from "../../../store/AllStore";
import { Link } from "react-router-dom";
import 产品bg from "./产品bg.png";
import { Dropdown, Menu } from "antd";

export class ModuleTwo extends React.Component {
  render() {
    const { Meta } = Card;
    const rmenu = [
      {
        name: allStore.isEnglish ? "Castable material" : "可浇注材料",
        id: "castable-material",
      },
      {
        name: allStore.isEnglish ? "Ceramic fiber blanket" : "陶瓷纤维毡",
        id: "ceramic-fiber-blanket",
      },
      {
        name: allStore.isEnglish
          ? "High alumina refractory bricks"
          : "高铝耐火砖",
        id: "high-alumina-refractory-bricks",
      },
      {
        name: allStore.isEnglish
          ? "Irregular refractory bricks"
          : "不规则耐火砖",
        id: "irregular-refractory-bricks",
      },
      {
        name: allStore.isEnglish ? "Mullite Insulating bricks" : "莫来石隔热砖",
        id: "mullite-insulating-bricks",
      },
      {
        name: allStore.isEnglish ? "Rock wool board" : "石棉板",
        id: "rock-rool-board",
      },
      {
        name: allStore.isEnglish ? "Standard refractory bricks" : "标准耐火砖",
        id: "standard-refractory-bricks",
      },
    ];
    const menu = (
      <Menu style={{ borderRadius: 4 }}>
        {rmenu.map((item, index) => {
          return (
            <Menu.Item key={index}>
              <Link to={`/product?position=${item.id}`}>{item.name}</Link>
            </Menu.Item>
          );
        })}
      </Menu>
    );
    return (
      <div
        id={"moduleTwo"}
        style={{
          height: 640,
          // display: "flex",
          paddingTop: 35,
          backgroundImage: `url(${产品bg})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      >
        <div
          style={{
            width: "100%",
            textAlign: "center",
            fontSize: 32,
            fontWeight: "bold",
            marginBottom: 48,
          }}
        >
          {allStore.isEnglish ? "Products" : "产品介绍"}
        </div>
        <div
          style={{ display: "flex", width: "100%", justifyContent: "center" }}
        >
          {" "}
          <Card
            hoverable
            style={{ width: 500, height: 400 }}
            cover={<img style={{ height: 300 }} alt="example" src={耐火材料} />}
          >
            <Meta
              title={
                <div>
                  <div className="md2-card-link">
                    {allStore.isEnglish ? "Refractory material" : "耐火材料"}
                    <Link to="/product?position=pd1">
                      <Dropdown overlay={menu}>
                        <Icon className="pcd-jp-icon" type="menu-unfold" />
                      </Dropdown>
                    </Link>
                  </div>
                </div>
              }
            />
          </Card>
          <div style={{ width: 72 }}></div>
          <Card
            hoverable
            style={{ width: 500, height: 400 }}
            cover={<img style={{ height: 300 }} alt="example" src={钢铁材料} />}
          >
            <Meta
              title={
                <div>
                  <div
                    className="md2-card-link"
                    onClick={() => {
                      allStore.productJump = "pd2";
                    }}
                  >
                    {allStore.isEnglish ? "Ferrous material" : "钢铁材料"}
                    <Link to="/product?position=pd2">
                      <Icon className="pcd-jp-icon" type="menu-unfold" />
                    </Link>
                  </div>
                </div>
              }
            />
          </Card>
        </div>
      </div>
    );
  }
}
